@import '../../../branded/src/components/Toggle.scss';

.extension-card {
    &__icon {
        width: 3rem;
        height: 3rem;
        object-fit: contain;
    }

    &__footer {
        background: unset;
    }

    &--enabled {
        .theme-light & {
            background-color: rgba($success, 0.2);
        }
        .theme-dark & {
            background-color: rgba($success, 0.2);
        }
    }

    &__shadow {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        opacity: 0;
        transition: opacity 500ms;

        .theme-light & {
            box-shadow: 0 0 0 6px rgba($success, 0.7);
        }
        .theme-dark & {
            box-shadow: 0 0 0 6px rgba($success, 0.7);
        }
    }

    &__shadow--show {
        opacity: 1;
    }

    &__logo {
        margin-left: calc(0.5rem - 2px); /* stylelint-disable-line */
        flex: 0 0 auto;
    }

    &__disabled-feedback {
        position: absolute;
        top: -1.625rem;
        // feedback is centered on top of toggle, so right is pr (0.5rem) + 50% of toggle width
        right: 0.5rem + ($toggle-width / 2);
        transform: translateX(50%);
        z-index: 1;
    }
}
